import React, { useState } from 'react';
import { 
  CheckCircle, Clock, AlertCircle, Eye, MessageSquare, 
  FileText, User, Calendar, Filter
} from 'lucide-react';

const ApprovalFlow = () => {
  const [activeTab, setActiveTab] = useState('pending');

  // 模拟审批任务数据
  const approvalTasks = {
    pending: [
      {
        id: 1,
        title: '2024年1月碳排放数据审核',
        submitter: '张三',
        submitTime: '2024-01-15 14:30',
        type: 'data_review',
        priority: 'high',
        description: '需要审核工厂A的碳排放数据',
        attachments: 2
      },
      {
        id: 2,
        title: '能源消耗报告审批',
        submitter: '李四',
        submitTime: '2024-01-14 10:20',
        type: 'report_approval',
        priority: 'medium',
        description: '月度能源消耗报告待审批',
        attachments: 1
      }
    ],
    approved: [
      {
        id: 3,
        title: '废物处理数据确认',
        submitter: '王五',
        submitTime: '2024-01-13 16:45',
        approvedTime: '2024-01-14 09:15',
        approver: '张经理',
        type: 'data_review',
        priority: 'low'
      }
    ],
    rejected: [
      {
        id: 4,
        title: '社会责任指标报告',
        submitter: '赵六',
        submitTime: '2024-01-12 11:30',
        rejectedTime: '2024-01-13 14:20',
        approver: '李经理',
        reason: '数据不完整，请补充相关证明材料',
        type: 'report_approval',
        priority: 'high'
      }
    ]
  };

  const getStatusColor = (status) => {
    const colors = {
      pending: 'bg-yellow-100 text-yellow-800',
      approved: 'bg-green-100 text-green-800',
      rejected: 'bg-red-100 text-red-800'
    };
    return colors[status] || 'bg-gray-100 text-gray-800';
  };

  const getPriorityColor = (priority) => {
    const colors = {
      high: 'text-red-600',
      medium: 'text-yellow-600',
      low: 'text-green-600'
    };
    return colors[priority] || 'text-gray-600';
  };

  const handleApprove = (id) => {
    alert(`审批通过任务 ${id}`);
  };

  const handleReject = (id) => {
    const reason = prompt('请输入拒绝理由：');
    if (reason) {
      alert(`已拒绝任务 ${id}，理由：${reason}`);
    }
  };

  return (
    <div className="p-6 max-w-7xl mx-auto">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-gray-900">审批流程</h2>
        <p className="text-gray-600">管理数据审核和审批任务</p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center">
            <Clock className="h-8 w-8 text-yellow-600 mr-3" />
            <div>
              <p className="text-sm text-gray-600">待处理</p>
              <p className="text-2xl font-bold text-gray-900">{approvalTasks.pending.length}</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center">
            <CheckCircle className="h-8 w-8 text-green-600 mr-3" />
            <div>
              <p className="text-sm text-gray-600">已通过</p>
              <p className="text-2xl font-bold text-gray-900">{approvalTasks.approved.length}</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center">
            <AlertCircle className="h-8 w-8 text-red-600 mr-3" />
            <div>
              <p className="text-sm text-gray-600">已拒绝</p>
              <p className="text-2xl font-bold text-gray-900">{approvalTasks.rejected.length}</p>
            </div>
          </div>
        </div>
      </div>

      {/* 标签切换 */}
      <div className="mb-6">
        <div className="border-b border-gray-200">
          <nav className="-mb-px flex space-x-8">
            {[
              { id: 'pending', name: '待处理', count: approvalTasks.pending.length },
              { id: 'approved', name: '已通过', count: approvalTasks.approved.length },
              { id: 'rejected', name: '已拒绝', count: approvalTasks.rejected.length }
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center ${
                  activeTab === tab.id
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700'
                }`}
              >
                {tab.name}
                <span className={`ml-2 px-2 py-1 text-xs rounded-full ${
                  activeTab === tab.id ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'
                }`}>
                  {tab.count}
                </span>
              </button>
            ))}
          </nav>
        </div>
      </div>

      {/* 任务列表 */}
      <div className="space-y-4">
        {approvalTasks[activeTab].map((task) => (
          <div key={task.id} className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <div className="flex items-center mb-2">
                  <h3 className="text-lg font-semibold text-gray-900 mr-3">{task.title}</h3>
                  <span className={`px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(activeTab)}`}>
                    {activeTab === 'pending' ? '待处理' : 
                     activeTab === 'approved' ? '已通过' : '已拒绝'}
                  </span>
                  <span className={`ml-2 text-sm font-medium ${getPriorityColor(task.priority)}`}>
                    {task.priority === 'high' ? '高优先级' : 
                     task.priority === 'medium' ? '中优先级' : '低优先级'}
                  </span>
                </div>
                
                <p className="text-gray-600 mb-3">{task.description}</p>
                
                <div className="flex items-center space-x-4 text-sm text-gray-500">
                  <div className="flex items-center">
                    <User className="h-4 w-4 mr-1" />
                    提交人：{task.submitter}
                  </div>
                  <div className="flex items-center">
                    <Calendar className="h-4 w-4 mr-1" />
                    提交时间：{task.submitTime}
                  </div>
                  {task.attachments && (
                    <div className="flex items-center">
                      <FileText className="h-4 w-4 mr-1" />
                      附件：{task.attachments}个
                    </div>
                  )}
                </div>

                {/* 审批信息 */}
                {task.approvedTime && (
                  <div className="mt-3 p-3 bg-green-50 rounded-lg">
                    <p className="text-sm text-green-800">
                      ✅ 由 {task.approver} 于 {task.approvedTime} 审批通过
                    </p>
                  </div>
                )}

                {task.rejectedTime && (
                  <div className="mt-3 p-3 bg-red-50 rounded-lg">
                    <p className="text-sm text-red-800 mb-1">
                      ❌ 由 {task.approver} 于 {task.rejectedTime} 拒绝
                    </p>
                    <p className="text-sm text-red-700">理由：{task.reason}</p>
                  </div>
                )}
              </div>

              {/* 操作按钮 */}
              <div className="flex items-center space-x-2 ml-4">
                <button className="p-2 text-gray-400 hover:text-gray-600 border border-gray-300 rounded-lg">
                  <Eye className="h-4 w-4" />
                </button>
                <button className="p-2 text-gray-400 hover:text-gray-600 border border-gray-300 rounded-lg">
                  <MessageSquare className="h-4 w-4" />
                </button>
                
                {activeTab === 'pending' && (
                  <>
                    <button 
                      onClick={() => handleApprove(task.id)}
                      className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm"
                    >
                      通过
                    </button>
                    <button 
                      onClick={() => handleReject(task.id)}
                      className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm"
                    >
                      拒绝
                    </button>
                  </>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 空状态 */}
      {approvalTasks[activeTab].length === 0 && (
        <div className="text-center py-12">
          <FileText className="h-16 w-16 text-gray-300 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">暂无审批任务</h3>
          <p className="text-gray-500">当前没有{activeTab === 'pending' ? '待处理的' : activeTab === 'approved' ? '已通过的' : '已拒绝的'}审批任务</p>
        </div>
      )}
    </div>
  );
};

export default ApprovalFlow; 